<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">我的下属巡查列表</view>
			<view class="right"></view>
		</view>
		<view class="body">
			<view class="card top flex-row">
				<view class="left">
					<view class="leader">{{ info.deptname }} - {{ info.username }}</view>
					<view class="time">当天巡检 <text>{{ info.todaymis }}</text> 次，月待完成 <text class="error">{{ info.notdone }}</text> 次</view>
				</view>
				<view class="right flex-column">
					<image class="user" src="../../static/img/risk/user.png"></image>
				</view>
			</view>
			<scroll-view v-if="list.length" scroll-y="true" class="scroll">
				<view @click="toPage('taskList?id='+item.id)" class="card flex-row" v-for="(item, index) in list" :key="index">
					<view class="left">
						<view class="leader">{{ item.username }}</view>
						<view class="time">当天巡检 <text>{{ item.todaymis }}</text> 次，月待完成 <text class="error">{{ item.notdone }}</text> 次</view>
						<!-- <view class="time">直属下属<text class="grey">{{ item.child_num }}</text>人</view> -->
					</view>
					<view class="right flex-column">
						<view @click.stop.prevent="toPage('checkEvaluate?id='+item.id)" class="btn" :class="{error: item.notdone > 0}">考核评价</view>
						<view @click.stop.prevent="toPage('branchList?id='+item.id)" v-if="item.has_child > 0" class="btn primary">下属详情</view>
					</view>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
const YEAR_LENGTH = 4;	// 连续显示的年份数量,5年
export default{
	components: { uniIcons },
	data(){
		return {
			info: {},
			list: [],
			userid: uni.getStorageSync('userid')
		}
	},
	onLoad(option){
		this.userid = option.id || uni.getStorageSync('userid');
		this.getData();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 跳转
		toPage(url){
			uni.navigateTo({url});
		},
		// 获取数据
		getData(){
			let _this = this;
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url: _this.$API.dangerBranch,
				header: _this.$API.get_head(),
				data: {userid: this.userid},
				success: (res)=>{
					uni.hideLoading();
					_this.info = res.data.data.myInfo;
					_this.list = res.data.data.list;
				},
				fail: ()=>{
					uni.showToast({
						icon: 'none',
						title: '加载失败'
					})
					uni.hideLoading();
				}
			})
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}
.body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	background: #F0F0F0;
}

.scroll{
	width: 100%;
	padding: 0 20upx;
	box-sizing: border-box;
	height: calc(100% - 156upx);
}

.user{
	width: 70upx;
	height: 70upx;
	margin-right: 30upx;
}

.card{
	/* height: 170upx; */
	height: 120upx;
	background: #fff;
	margin-bottom: 16upx;
	border-radius: 16upx;
	padding: 14upx 20upx 20upx;
	box-shadow: 0 2upx 4upx #DEDEDE;
}
.card.top{
	height: 140upx;
	padding: 0 40upx;
	border-radius: 0;
	margin-bottom: 16upx;
}
.card .title{
	margin-bottom: 6upx;
}
.card .right{
	width: 160upx;
	align-items: flex-end;
}
.card .right .btn{
	color: #fff;
	width: 150upx;
	padding: 6upx 0;
	font-size: 26upx;
	background: #35CB03;
	text-align: center;
	border-radius: 10upx;
}
.card .right .btn.error{
	background: #FE3235;
}
.card .right .btn.primary{
	background: #1095D7;
}
.card .right .btn:last-child{
	margin-top: 16upx;
}
.card .left{
	width: calc(100% - 160upx);
}
.card .left .leader{
	color: #333;
	font-size: 30upx;
	font-weight: bold;
}
.card .left .time{
	color: #999;
	font-size: 26upx;
	line-height: 1.8;
}
.card .left .time text{
	color: #34CB02;
	margin: 0 10upx;
}
.card .left .time text.error{
	color: red;
}
.card .left .time text.grey{
	color: grey;
}
</style>
